<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">手机号绑定</block>
		</cu-custom>
		<view class="form-box">
			<view class="form">
				<u-form :model="form" ref="uForm">
					<u-form-item label="+86" :label-style="labelStyle" label-width="120"><u-input placeholder="请输入手机号" v-model="form.phone" type="number" /></u-form-item>
					<u-form-item label="验证码" label-width="120" prop="code">
						<u-input placeholder="请输入验证码" v-model="form.code" type="text" />
						<u-button slot="right" :custom-style="customStyle" type="success" size="medium" @click="getCode">{{codeTips}}</u-button>
					</u-form-item>
				</u-form>
			</view>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
			<u-button type="primary" @click="submit">绑定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openCode: '',
				openId: '',
				phone: '',
				labelStyle: {
					
				},
				form: {
					phone: '',
					code: ''
				},
				key: '',
				customStyle: {
					padding: '0 10px'
				},
				codeTips: ''
			}
		},
		onLoad(option) {
			this.openId = option.openId;
			this.openCode = option.code;
			if(option.phone){
				this.login();
			}
		},
		methods: {
			login() {
				this.$u.post('/blade-auth/oauth/token',{
					phone: this.form.phone,
					grant_type: 'wxmp',
					scope: 'all'
				},{
					'Content-Type': 'application/x-www-form-urlencoded',
					'Captcha-Key': this.key,
					'Tenant-Id': this.website.tenantId,
					'Captcha-Code': this.form.code,
					'Wx-Code': this.openCode,
					'Wx-Openid': this.openId
				}).then(res => {
					this.$u.vuex('vuex_login', false);
					uni.setStorageSync("token", res.access_token);
					uni.navigateTo({
						url: '../index/tabbar?PageCur=index'
					})
				})
			},
			submit() {
				if(this.form.phone == ''){
					this.$u.toast("请输入手机号");
					return;
				}
				if(this.form.code == ''){
					this.$u.toast("请输入验证码");
					return;
				}
				this.login();
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if(this.form.phone == ''){
					this.$u.toast("请输入手机号");
					return;
				}
				this.$u.get('/blade-auth/oauth/phone/captcha',{
					tenantId: this.website.tenantId,
					phone: this.form.phone
				}).then(res => {
					this.$refs.uCode.start();
					this.key = res.key;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.form {
		margin-bottom: 40px;
	}
	.form-box {
		padding: 20px;
	}
</style>
